<template>
	<view>
		<view style="height:120upx"></view>
		<j-foot>
			<view class="flex flex-direction padding" style="width:100%;">
				<!-- 多通道选择 -->
				<button v-if="channelMessage.channelsArr&&channelMessage.channelsArr.length" class="cu-btn lg bg-olive" @tap="channelClick" >{{$t('JLink.deviceMessage.channels.title')}}</button>
				<button v-else class="cu-btn lg" :class="message.expirationtimeColor ? 'bg-'+message.expirationtimeColor : 'orange'" @tap="handleClick" >
					<text v-if="!message.expireTime">{{$t('JLink.buy.activateNow')}}</text><!-- 立即开通 -->
					<text v-else>
						<text v-if="message.expirationtimeColor!='reds'">{{$t('JLink.buy.extendedUse')}}</text>
						<text v-else>{{$t('JLink.buy.expireRenewal')}}</text>
					</text>
				</button>
			</view>
		</j-foot>
	</view>
	
</template>

<script>
export default {
	props:{
		message:{
			type:Object,
			default:()=>{
				return {}
			}
		},
		classifyId:{
			type:String,
			default:''
		},
		channelMessage:{
			type:Object,
			default:()=>{
				return {}
			}
		}
	},
	data() {
	    return {
			newMessage:{},
			channelMessageObj:{},
		}
	},
	watch: {
		channelMessage(val){
			this.channelMessageObj=val
		}
	},
	methods: {
		// 多通道弹框
		channelClick(index){
			const { sn }  = this.channelMessageObj
			this.$nextTick(()=>{
				let parent = this.$parent.$parent.$parent;
				parent.modalName = 'channelsModal';
			})
		},
		// 单通道
		handleClick(index){
			const { devId, channel,pid } = this.message;
			console.log('单通道=====',this.message);
			console.log('classifyId=====',this.classifyId);
			let devicePid = pid ? pid : '';
			let code;
			let eventName;
			switch (this.classifyId){
				case 'xmc.css':
					code=!this.message.expireTime ? '603027': this.message.expirationtimeColor!='reds' ? '603028':'603029'
					eventName=!this.message.expireTime ? 'introduce_xmcCss_goBuy': this.message.expirationtimeColor!='reds' ? 'introduce_xmcCss_extendedUse':'introduce_xmcCss_renewal'
					break;
				case 'xmc.voes':
					code=!this.message.expireTime ? '603041': this.message.expirationtimeColor!='reds' ? '603042':'603043'
					eventName=!this.message.expireTime ? 'introduce_xmcVoes_goBuy': this.message.expirationtimeColor!='reds' ? 'introduce_xmcVoes_extendedUse':'introduce_xmcVoes_renewal'
					break;
				case 'pms.voes':
					code=!this.message.expireTime ? '603038': this.message.expirationtimeColor!='reds' ? '603039':'603040'
					eventName=!this.message.expireTime ? 'introduce_pmsVoes_goBuy': this.message.expirationtimeColor!='reds' ? 'introduce_pmsVoes_extendedUse':'introduce_pmsVoes_renewal'
					break;
				case 'pms.sms':
					code=!this.message.expireTime ? '603035': this.message.expirationtimeColor!='reds' ? '603036':'603037'
					eventName=!this.message.expireTime ? 'introduce_pmsSms_goBuy': this.message.expirationtimeColor!='reds' ? 'introduce_pmsSms_extendedUse':'introduce_pmsSms_renewal'
					break;
				case 'net.cellular':
					code=!this.message.expireTime ? '603032': this.message.expirationtimeColor!='reds' ? '603033':'603034'
					eventName=!this.message.expireTime ? 'introduce_netCellular_goBuy': this.message.expirationtimeColor!='reds' ? 'introduce_netCellular_extendedUse':'introduce_netCellular_renewal'
					break;
			}
			this.$postPointData({code, eventName})
			this.$routing(`${this.$pages.buyDefault}?sn=${devId}&channel=${channel}&classifyId=${this.classifyId}&devicePid=${devicePid}`)
		}
	}
}
</script>
<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
